﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>新增库位</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        .page-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .close-btn {
            background: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }

        .form-row {
            display: flex;
            margin-bottom: 16px;
        }

        .form-item {
            width: 50%;
            margin-right: 20px;
        }

        .form-footer {
            display: flex;
            justify-content: flex-end;
            margin-top: 24px;
        }

            .form-footer .el-button {
                margin-left: 12px;
            }
    </style>
</head>
<body>
    <div id="app" class="page-container">
        <div class="header">
            <h3>新增</h3>
            <button class="close-btn" v-on:click ="handleCancel">×</button>
        </div>
        <el-form :model="form" label-width="100px">
            <div class="form-row">
                <el-form-item label="库位编号" class="form-item">
                    <el-input v-model="form.storageLocationCode" readonly placeholder="自动获取系统编号" />
                </el-form-item>
                <el-form-item label="库位名称" required class="form-item">
                    <el-input v-model="form.storageLocationName" placeholder="请输入" />
                </el-form-item>
            </div>
            <div class="form-row">
                <el-form-item label="库位容量/m³" required class="form-item">
                    <el-input v-model="form.storageLocationCapacity" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="库位主管" required class="form-item">
                    <el-input v-model="form.managerName" placeholder="请输入" />
                    <el-button type="text"></el-button>
                </el-form-item>
            </div>
            <div class="form-row">
                <el-form-item label="库位状态" class="form-item">
                    <el-radio-group v-model="form.storageLocationStatus">
                        <el-radio label="启用">启用</el-radio>
                        <el-radio label="停用">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" required class="form-item">
                    <el-input v-model="form.sortOrder" placeholder="请输入" />
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remarks" placeholder="请输入" rows="4" />
            </el-form-item>
            <div class="form-footer">
                <el-button v-on:click ="handleCancel">取消</el-button>
                <el-button type="primary" v-on:click ="handleSave">保存</el-button>
            </div>
        </el-form>
    </div>

    <script>
        const { createApp, ref } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
          setup() {
            // 表单数据
            const form = ref({
              storageLocationCode: '自动获取系统编号', // 模拟自动生成，实际可通过接口获取
              storageLocationName: '',
              storageLocationCapacity: '',
              managerName: '',
              storageLocationStatus: '启用', // 默认启用
              sortOrder: '',
              remarks: ''
            });

            // 保存方法
            const handleSave = () => {
              // 表单验证
              if (!form.value.storageLocationName) {
                ElMessage.warning('库位名称不能为空');
                return;
              }
              if (!form.value.storageLocationCapacity) {
                ElMessage.warning('库位容量不能为空');
                return;
              }
              // 模拟提交（实际项目中替换为接口请求）
              console.log('提交数据：', form.value);
              ElMessage.success('保存成功');
              // 可根据需求添加跳转或弹窗关闭逻辑
            };

            // 取消方法
            const handleCancel = () => {
              ElMessage.info('已取消操作');
              // 实际项目中可添加关闭弹窗或返回上一页的逻辑
              // 例如：window.history.back();
            };

            return {
              form,
              handleSave,
              handleCancel
            };
          }
        }).use(ElementPlus, { locale: ElementPlusLocaleZhCn }).mount('#app');
    </script>
</body>
</html>